// pages/myCart/myCart.js
Page({
  data: {
    active: false, // 默认不选中
    isSelected: false, // 当前的选项是否选中,默认不选中
    isSelectedAll: false, // 全选
    startX: '', // 开始的位置变量
    cartList: [], // 购物车的容器
    num: 0, // 选中的个数  num>0控制颜色
    totalPrice: '0.00', // 总价格
    isShow: false, // 控制结算按钮是否高亮
  },
  // 点击出现删除
  demo() {
    this.setData({
      active: !this.data.active
    })
  },
  // 1.触发出现删除
  touchStart(e) {
    // console.log("开始位置", e.touches[0].clientX);
    this.setData({
      startX: e.touches[0].clientX
    })
  },
  // 移动事件
  touchMove(e) {
    // console.log("move", e.touches[0]);
    // 每个元素豆有一个标识---滑动谁获取谁
    var index = e.currentTarget.dataset.index
    console.log(index);
    var cartList = this.data.cartList
    // 滑动别的上一个隐藏
    // for(var i = 0; i<cartList.length;i++) {
    //   cartList[i].active = false
    // }
    var moveX = e.touches[0].clientX
    var startX = this.data.startX
    if (moveX < startX) { // 左滑
      cartList[index].active = true
    } else {
      cartList[index].active = false
    }
    // 设置cartList
    this.setData({
      cartList: cartList
    })
  },
  onLoad: function (options) {
    // 已进入页面就调用
    // this.getShop();  只执行一次
  },
  // 2.获取购物车信息
  getShop() {
    var isSelectedAll = this.data.isSelectedAll
    wx.request({
      url: 'http://iwenwiki.com:3002/api/cart/list',
      success: res => {
        console.log(res.data);
        if (res.data.status == 200) {
          // this.setData({
          //   cartList: res.data.data.result
          // })
          // 进入页面  判断全选是否选中: 选中---所有列表都选中 否则不处理
          if (isSelectedAll) {
            var cartList = res.data.data.result
            for (var i = 0; i < cartList.length; i++) {
              cartList[i].isSelected = true
            }
            this.setData({
              cartList: cartList
            })
          } else {
            this.setData({
              cartList: res.data.data.result
            })
          }
        } else {
          console.log("购物车没有数据");
        }
      }
    })
  },
  // 3.点击选中元素
  // 3.1点击选中 点击取消
  // 3.2点击只选中当前
  // 3.3统计个数全选
  // 3.4控制结算高亮
  selectedList(e) {
    var index = e.currentTarget.dataset.index
    // console.log(index);
    var cartList = this.data.cartList;
    var num = this.data.num; // 个数
    // 切换当前的元素的选中状态
    cartList[index].isSelected = !cartList[index].isSelected
    // 全选
    if (cartList[index].isSelected) {
      // 选中
      num++;
    } else {
      num--;
    }
    // console.log(num);
    // console.log(cartList.length);
    // 当Num总长度等于cartList长度就选中
    if (num == cartList.length) {
      this.setData({
        isSelectedAll: true
      })
    } else {
      this.setData({
        isSelectedAll: false
      })
    }
    // 判断当前的选中
    // if(num>0) {
    //   this.setData({
    //     isShow: true
    //   })
    // }else {
    //   this.setData({
    //     isShow: false
    //   })
    // }
    this.setData({
      cartList: cartList,
      num: num
    })
    // 获取价格的方法
    this.goTotalPrice()
  },
  // 4.计算价格--函数
  // 4.1 获取当前的cartList ---4.2遍历查看cartList里面的选中元素  计算选中元素----4.3计算=当前的元素的数量*价格
  goTotalPrice() {
    var cartList = this.data.cartList;
    var sum = 0; // 总价格
    // 遍历cartList 获取选中
    for (var i = 0; i < cartList.length; i++) {
      // cartList[i].isSelected 是否选中
      if (cartList[i].isSelected) {
        sum += cartList[i].price * cartList[i].num
      }
    }
    // 更改价格
    this.setData({
      totalPrice: sum.toFixed(2)
    })
  },
  // 5.点击全选按钮
  // 5.1 全选按钮加事件, 点击的时候--对状态取反 5.2如果选中上面所有的cartList都选中 5.3取消全选--cartList取消选中  价格计算
  SelectedAll() {
    // 获取全选按钮之前的状态取反
    var isSelectedAll = !this.data.isSelectedAll;
    var cartList = this.data.cartList;
    var num = this.data.num;
    // 控制所有cartlist元素选中
    for (var i = 0; i < cartList.length; i++) {
      cartList[i].isSelected = isSelectedAll
    }
    if (isSelectedAll) {
      // 全选
      num = cartList.length
    } else {
      num = 0
    }
    // 更新数据
    this.setData({
      cartList: cartList,
      isSelectedAll: isSelectedAll,
      num: num
    })
    //更新价格
    this.goTotalPrice();
  },
  // 6.点击++修改购物车数量
  add(e) {
    // 1.获取当前操作元素  2. 获取列表容器cartList 
    var cartList = this.data.cartList;
    var index = e.currentTarget.dataset.index;
    // 获取当前元素目前数量
    var num = cartList[index].num
    // 2.点击数量++  提交给后台
    num++;
    console.log("增加的数量", num);
    cartList[index].num = num
    // 3.请求接口
    wx.request({
      url: 'http://iwenwiki.com:3002/api/cart/update',
      data: {
        id: cartList[index].id,
        num: num
      },
      success: res => {
        console.log(res.data);
        if (res.data.status == 200) {
          // 成功了 修改数量
          this.setData({
            cartList: cartList
          })
        }
      }
    })
  },
  // 7.点击--修改购物车数量
  reduce(e) {
    // 1.获取当前操作元素  2. 获取列表容器cartList 
    var cartList = this.data.cartList;
    var index = e.currentTarget.dataset.index;
    // 获取当前元素目前数量
    var num = cartList[index].num
    // 2.点击数量++  提交给后台
    num--;
    if (num < 1) {
      wx.showToast({
        title: '数量最少为1',
        icon: 'none'
      })
      return;
    }
    // 修改
    console.log("减少的数量", num);
    cartList[index].num = num
    // 3.请求接口
    wx.request({
      url: 'http://iwenwiki.com:3002/api/cart/update',
      data: {
        id: cartList[index].id,
        num: num
      },
      success: res => {
        console.log(res.data);
        if (res.data.status == 200) {
          // 成功了 修改数量
          this.setData({
            cartList: cartList
          })
        }
      }
    })
  },
  // 8.删除
  // 8.1参数:获取删除的是哪个元素---8.2执行删除数据---8.3删除后更新页面
  delete(e) {
    var index = e.currentTarget.dataset.index;
    var cartList = this.data.cartList;
    // 执行删除接口
    wx.request({
      url: 'http://iwenwiki.com:3002/api/cart/delete',
      data: {
        id: cartList[index].id
      },
      success: res => {
        console.log(res.data);
        if (res.data.status == 200) {
          wx.showToast({
            title: '删除成功',
            icon: 'none'
          })
          // 数据消失
          // 直接删除本地的数据data里面的cartList容器  对应的这个数据
          cartList.splice(index, 1); // 删除 splice(index下标, 删除个数)
          this.setData({
            cartList: cartList
          })
          // 获取价格
          this.goTotalPrice();
        }
      }
    })

  },
  // 9.结算
  jiesuan() {
    // 1.先判断是否授权登录  登录过有标识openid/user
    // 2.直接调用接口--购买
    // var user = wx.getStorageSync('openid');// 之前登录存储的字段
    // if(user) {
    //   // 直接购买
    //   // 跳转完成界面

    // } else {
    //   // 弹框提示 -- 先授权--再登录
    //   // 跳转到授权页面
    //   wx.switchTab({
    //     url: '/pages/about/about',
    //   })
    // }
    //------------------
    // 9.1  直接购买   9.2 跳转页面
    wx.request({
      method: 'POST',
      url: 'http://iwenwiki.com:3002/api/buy',
      data: {
        user: 'qq',
        id: '123'
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: res => {
        console.log(res.data);
        // 页面跳转
        if(res.data.status == 200) {
          wx.redirectTo({
            url: '/pages/complete/complete?mark=' + res.data.msg,
          })
        }
      }
    })
  },
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getShop();

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})